<script setup lang="ts">
import {
  User,
  Tickets,
  DataAnalysis
} from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import router from '@/router'
import {computed} from "vue";
const route = useRoute()
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleEmployee = () => {
  router.push('/backend-management/employee')
}
const handleOrder = () => {
  router.push('/backend-management/order')
}
const handleDataAnalysisOrder = () => {
  router.push('/backend-management/dataAnalysis/order')
}
const activeMenu = computed(() => {
  const matched = route.matched
  return matched[matched.length - 1]?.path || '/'
})
</script>

<template>
  <div class="backend-management">
    <el-container>
      <el-aside width="260px" class="aside">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                :default-active="activeMenu"
                unique-opened
            >
              <el-menu-item index="/backend-management/order" @click="handleOrder">
                <el-icon size="20">
                  <Tickets/>
                </el-icon>
                <span>订单管理</span>
              </el-menu-item>
              <el-menu-item index="/backend-management/employee" @click="handleEmployee">
                <el-icon size="20"><User /></el-icon>
                <span>员工管理</span>
              </el-menu-item>
              <el-sub-menu index="/backend-management/dataAnalysis">
                <template #title>
                  <el-icon size="20"><DataAnalysis /></el-icon>
                  <span>数据统计</span>
                </template>
                <el-menu-item-group title="统计分析" >
                  <el-menu-item
                      index="/backend-management/dataAnalysis/order" @click="handleDataAnalysisOrder">订单统计</el-menu-item>
<!--                  <el-menu-item
                      index="/backend-management/dataAnalysis/employee" @click="handleDataAnalysisOrder">员工统计</el-menu-item>-->
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-main><RouterView></RouterView></el-main>
    </el-container>
  </div>
</template>

<style scoped lang="scss">
.backend-management {
  .aside {
    width: 260px;
    background-color: #ffffff;
    height: calc(100vh - 60px);
    border-right: 1px solid #eaeaea;
    position: fixed;  // 添加固定定位
    left: 0;
    top: 60px;        // 适配顶部Header高度
    bottom: 0;        // 撑满底部
    overflow: hidden; // 防止出现双滚动条
    z-index: 1000;    // 确保菜单在内容之上
    .tac {
      width: 260px;

      .el-menu {
        border: none;
        width: 260px !important;
        :deep(.el-menu-item) { // 修复选择器写法
          .el-menu-item.is-active {
            color: var(--el-color-primary) !important;
            background-color: #e8f4ff !important;

            span {
              color: inherit !important;
              font-weight: bold;  // 保持选中状态加粗
            }
          }
          &.is-active > .el-sub-menu__title {
            color: var(--el-color-primary) !important;
            span {
              color: #409eff !important;
            }
          }
        }
      }
    }
  }

  .el-main {

    height: 100%;
    overflow-y: auto; /* 仅主内容区可滚动 */
    padding: 24px;
    background-color: #f5f7fa;
    margin-left: 260px; // 为固定菜单留出空间
    min-height: calc(100vh - 60px); // 保持内容高度适配
  }
}

</style>